<template>
	<view>
		<view style="position:fixed;width: 100%;padding-bottom：30rpx;z-index:10" class="bg-white">
			<div style="height:30rpx;background-color: #fff"></div>
			<view :style="{height: statusBarHeight + 'px'}" class="bg-white"></view>
			<Title :title="title" class="bg-white" />
		</view>
		<view :style="`height:calc(${statusBarHeight}px + 110rpx)`"></view>

		<tipSl :text="$t('【重要提示】请如实描述发布内容及相关信息，禁止虚假宣传！违规信息将下架或封号处理。')" style="margin: 0;background-color: transparent;"></tipSl>





		<u-form
			:model="model1"
			ref="uForm"
			class="ml-20 mr-20 formSty"
		>
			<view class="contentBg mt-15">
				<u-form-item 
					:border-bottom="false"
					prop="scope_category_id" 
					:required="true"
					:label="$t('发布类型')"
					label-position="top"
					class="titleSty"
				>
					<u-button class="badBtn" @click="showType = true">
						<p class="text-333" style="flex: 1;">{{ typeName }}</p>
						<image class="w-20 h-15" src="../../../static/icon/downArrow.png" mode="" style="text-align: right;"></image>
					</u-button>
					<u-picker :confirmText="$t('确定')" :cancelText ="$t('取消')" v-model="showType" mode="selector" :range="typeList" :range-key="plang('name')" @cancel= "showType = false" @confirm="getTypeInfo"></u-picker>
				</u-form-item>
			</view>
			<view class="contentBg mt-15">
				<u-form-item :border-bottom="false"
					prop="person_name"
					:required="true"
					:label="$t('标题')"
					label-position="top"
					class="titleSty"
				>
					<u-input v-model="model1.person_name" type="text" :placeholder="$t('请输入标题')" :maxlength="200" :border="true" :auto-height="true" />
				</u-form-item>
			</view>
			<view class="contentBg mt-15">
				<u-form-item :border-bottom="false"
					prop="con"
					:required="true"
					:label="$t('服务内容')"
					label-position="top"
					class="titleSty"
					style="position: relative;"
				>
					<u-input v-model="model1.con" type="textarea" :placeholder="$t('请输入内容详情')" :maxlength="1000" :border="true" height="240" :auto-height="true" />
						<p class="text-888 fz24" style="position: absolute; bottom: 30rpx; right: 20rpx;"> {{ remaining }} </p>
				</u-form-item>
			</view>
			<view class="contentBg mt-15">
				<p class="titleSty pt-35">{{$t('价格区间')}}</p>
				<view class="flex-start flex  ml-30">
					<u-form-item :border-bottom="false">
						<u-input v-model="model1.price" class="smallInputSty"
							placeholder="0.00" maxlength="12"></u-input>
					</u-form-item>
					<div class="w-42 h-1 bg-888 ml-12"></div>
					<u-form-item :border-bottom="false">
						<u-input v-model="model1.price2" class="smallInputSty ml-12"
							placeholder="0.00" maxlength="12"></u-input>
					</u-form-item>
					<view class="unitSty ml-35">
						<span v-for="(item, index) in unitList" class="commonSty" :class="{acticeUnitSty: currentUnit == index }" @click="changeUnit(index)">{{item}}  <span v-show="index == 0" class="ml-5 mr-5">/</span></span>
					</view>
				</view>
				<u-form-item :border-bottom="false"
					:label="$t('价格表单')"
					label-position="top"
					class="titleSty"
				>
					<!-- <u-upload
						:action="action"
						:file-list="fileList3"
						:max-size="imageMaxSize"
						:max-count="max_count"
						:auto-upload="autoUpload"
						:show-upload-list="showUploadList"
						:del-bg-color="delBgColor"
						:del-color="delColor"
						:limit-type="limitType"
						@on-success="onSuccessPrice"
						@on-remove="onRemovePrice"
						:show-progress="false"
						width="150"
						height="150"
					>
					</u-upload> -->
					<view class="uploads">
						<view class="img" v-for="(item, index) in model1.price_image" :key="index"
							@click="onPreview(item.fullurl)">
							<image :src="item.fullurl" mode="aspectFill" />
							<view class="delete" @click.stop="onDelete(index, 'price_image')">
								<view class="lien"></view>
							</view>
						</view>
						<view class="img" @click="onUpload({ type: 'image', size: 7, count: 3 }, 'price')"
							v-if="model1.price_image.length < 3">
							<image src="/static/caigou/camera.png" />
						</view>
					</view>
				</u-form-item>
			</view>
			<view class="contentBg mt-15">
				<u-form-item :border-bottom="false"
					:label="$t('服务保障')"
					label-position="top"
					class="titleSty"
					style="position: relative;"
				>
					<u-input v-model="model1.skill" type="textarea" :placeholder="$t('请输入服务保障')" :maxlength="1000" :border="true" height="240" :auto-height="true" />
						<p class="text-888 fz24" style="position: absolute; bottom: 30rpx; right: 20rpx;"> {{ remainingService }} </p>
				</u-form-item>
			</view>
			<view class="contentBg mt-15">
				<u-form-item
					:border-bottom="false" 
					:label="$t('地区')"
					label-position="top"
					prop="city_id"
					:required="true"
					class="titleSty"
				>
					<view class="citySty mt-30">
						<!-- <citySelect style="width: 100%;" :text="city_name" @confirm="e => {
							city_name = e.column3.label;
							model1.city_id = e.column3.value;
						}" /> -->
						<city :value="city_name" @change="e => {
							model1.city_id = e.column3.value;
							city_name = e.column1.value == -1 ? '不限' : (e.column1[plang('label')] + '-' + e.column2[plang('label')]  + '-' + e.column3[plang('label')] );
							location_city = `${e.column1.value},${e.column2.value},${e.column3.value}`
						}">
							<p class="fz26 text-888" style="text-align:center">{{ city_name || $t('请选择') }}</p>
						</city>
					</view>
				</u-form-item>
			</view>
			<view class="contentBg mt-15">
				<u-form-item :border-bottom="false"
					prop="images"
					:required="true"
					:label="$t('支持jpeg、jpg、png格式大小7m内')"
					label-position="top"
					class="titleSty"
				>
				<!-- <u-upload
					:action="action"
					:file-list="fileList1"
					:max-size="imageMaxSize"
					:max-count="max_count"
					:auto-upload="autoUpload"
					:show-upload-list="showUploadList"
					:del-bg-color="delBgColor"
					:del-color="delColor"
					:limit-type="limitType"
					@on-success="onSuccess"
					@on-remove="onRemove"
					:show-progress="false"
					width="150"
					height="150"
				>
				</u-upload> -->
				<view class="uploads">
					<view class="img" v-for="(item, index) in model1.images" :key="index"
						@click="onPreview(item.fullurl)">
						<image :src="item.fullurl" mode="aspectFill" />
						<view class="delete" @click.stop="onDelete(index, 'images')">
							<view class="lien"></view>
						</view>
					</view>
					<view class="img" @click="onUpload({ type: 'image', size: 7, count: 3 })"
						v-if="model1.images.length < 3">
						<image src="/static/caigou/camera.png" />
					</view>
				</view>
				</u-form-item>
				<u-form-item :border-bottom="false"
					label-position="top"
					:label="$t('支持mp4、mvb、AVI格式大小限制在35m内')"
					class="titleSty"
				>
					<view class="uploads">
						<view class="img zhan" v-for="(item, index) in model1.videos" :key="index"
							@click="onPreviewVideo(item.fullurl)">
							<image src="@/static/play.png" mode="aspectFill" class=""></image>
							<view class="delete" @click.stop="onDelete(index, 'videos')">
								<view class="lien"></view>
							</view>
						</view>
						<view class="img" @click="onUpload({ type: 'video', size: 35, count: 1 })"
							v-if="model1.videos.length < 1">
							<image src="@/static/videox.png" mode="aspectFill" class="w-160 h-160" />
						</view>
					</view>
				</u-form-item>
			</view>
		</u-form>
		
		<!-- 播放视频 -->
		<uni-popup ref="popupVideo" type="center" background-color="#000" mask-background-color="#000" class="popvexxx">
		  <view class="wrapper-video">
		    <video :src="previewVideoUrl" :show-center-play-btn="true" object-fit="cover" play-btn-position="center"
		      :controls="true" :autoplay="true" class="video-main">
		    </video>
		  </view>
		</uni-popup>
		
		
		<view class="empty"></view>
		<view class="footer_btn4">
			<button class="btn_blue" :disabled="btnDis" @click="submit">{{$t('确认')}}</button>
		</view>
		<!-- <u-popup v-model="showKind"  mode="bottom" :closeable="true" height="500rpx">
			<p class="text-111 fz36 font-bold mt-45 ml-45">{{$t('发布类型')}}</p>
			<view class="wrap flex-start mt-45 ml-10 mb-50">
				<view v-for="(item, index) in kindList" class="ml-18 mt-16 commonKindSty" :class="{activeKindSty: current == index}" @click="changeKind(index)">
					{{ item }}
				</view>
			</view>
			<view class="footer_btn4">
				<view class="btn_blue" @click="submit">
					确认
				</view>
			</view>
		</u-popup> -->

		<u-modal :confirm-text="$t('确定')"  :cancel-text ="$t('取消')"  v-model="showPersonInfo" width="70%" :show-title="false" @confirm="goSendSuccess">
			<view class="flex wrap center mt-30 mb-30">
				<view class="title" style="color: #f40;font-size: 30rpx;font-weight: 600;text-align: center;">{{$t('联系客服尽快通过审核')}}</view>
				<view class="phoneStxxxy" v-for="item in phoneList" @click="callPhone(item.tel+'')">
					{{item.country == 'zh'? $t('中国') : $t('俄罗斯')}} {{item.tel}}
				</view>
			</view>
		</u-modal>

	</view>
</template>

<script>
	import Title from './components/title.vue'
	import { getCcateProfessional, sendSaveProfessional ,getCustomerTel} from '@/api/basic'
	import citySelect from "./components/citySelect.vue"
	import { uploadFile, chooseFile } from '@/assets/public.js';
	import {
		HTTP_REQUEST_URL,
		IMAGE_MAX_SIZE,
		IMAGE_MAX_COUNT,
		IMAGE_URL,
		HTTP_IMG_UTL
	} from '@/config/app';
	export default {
		components: {
			Title,
			citySelect
		},
		data() {
			return {
				title: this.$t('发布'),
				showKind: false,
				btnDis: false,
				current: '',
				currentUnit: 0,
				showType: false,
				statusBarHeight: uni.getStorageSync('statusBarHeight') || 0,
				videoItem: {},
				typeList: [],
				fileList2: [],
				fileList1: [],
				fileList3: [],
				action: HTTP_REQUEST_URL + '/common/upload',
				imageMaxSize: IMAGE_MAX_SIZE,
				imageMaxCount: IMAGE_MAX_COUNT,
				max_count: 3,
				autoUpload: true,
				showUploadList: true,
				unitList: ['￥', '₽'],
				delBgColor: '#fa3534',
				delColor: '#ffffff',
				uploadText: this.$t('选择图片'),
				limitType: ['png', 'jpg', 'jpeg', 'webp', 'gif', 'image'],
				action: `${HTTP_REQUEST_URL}/common/upload`,
				kindList: [this.$t('代收付款'), this.$t('代办证件'), this.$t('签证'), this.$t('票务'), this.$t('现场监督'), this.$t('代理采购'), this.$t('医疗看病'), this.$t('代理销售')],
				typeName: '',
				city_name: '',
				priceImgList: [],
				videoList:[],
				imagesList: [],
				IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/',
				model1: {
					user_id: uni.getStorageSync("user_id"), // 用户id
					type: '1',
					scope_category_id: '',
					person_name: '',
					con: '',
					skill: '',
					price: '',
					price2: '',
					price_image: [],
					price_unit: '￥',
					city_id: '',
					images: [],
					videos: [],
				},
				rules: {
					price: [
						{ 
							required: false, 
							pattern:  /[^0-9]/g,
							message: this.$t('请输入正确的价格'),
							trigger: ['change'],
						},
						// 正则判断数字
						// {
						// 	pattern: /[^0-9]/g,
						// 	// 正则检验前先将值转为字符串
						// 	transform(value) {
						// 		return String(value);
						// 	},
						// 	message: '只能输入数字'
						// },
					],
					person_name: [
						{ 
							required: true, 
							message: this.$t('请填写标题'), 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change'],
						}
					],
					con: [
						{ 
							required: true, 
							message: this.$t('请填写服务内容'), 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change'],
						}
					],
					city_id: [
						{ 
							required: true, 
							message: this.$t('请选择地区'), 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change'],
							type: 'number'
						}
					],
					images: [
						{ 
							required: true, 
							message: this.$t('请上传图片'), 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change'],
							type: 'array'
						}
					],
				},
				maxLength: 1000,
				previewVideoUrl: '',
				location_city: '',
				phoneList: [],
				showPersonInfo: false,
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		mounted() {
			this.getCcateProfessional()
			this.getCustomerTelsxx()

		},
		onLoad(options) {
			if (options.modelInfo) {
				this.modelInfo = JSON.parse(options.modelInfo)
				console.log('88999', this.modelInfo)
				this.model1 = ({...this.model1, ...this.modelInfo})
				this.model1.price_image = this.modelInfo.price_image && this.modelInfo.price_image.split(',')
				this.model1.videos = this.modelInfo.videos && this.modelInfo.videos.split(',')
			}
		  },
		computed: {
		  remaining() {
		    return this.maxLength - this.model1.con.length;
		  },
		  remainingService() {
		    return this.maxLength - this.model1.skill.length;
		  },
		},
		methods: {
			goSendSuccess() {
				this.showPersonInfo = false
				uni.redirectTo({
					url: '/pages/tabbar/professionalList/sendSuccess'
				})
			},
			callPhone(tel) {
				this.isMessageGo({
					action: 'makePhoneCall',
					data: tel
				})
			},
			getCustomerTelsxx() {
				getCustomerTel().then(res => {
					this.phoneList = res.data.data
				})
			},
				back() {
					// uni.navigateBack()
					this.cback()
				},
				getCcateProfessional() {
					getCcateProfessional().then(res => {
						this.typeList = res.data.data
						console.log('this.typeList000', this.typeList)
						if(this.model1.scope_category_id) {
							this.typeName = this.typeList.filter(item => item.id == this.model1.scope_category_id)[0][this.plang['name']]
							console.log('this.typeName000', this.typeName)
						}
						
					})
				},
				getTypeInfo(e) {
					this.typeName = this.typeList[e][this.plang('name')]
				
					this.model1.scope_category_id = this.typeList[e].id
				},
				changeUnit(index) {
					this.currentUnit = index
					this.model1.price_unit = this.unitList[index]
				},
				changeKind(index) {
					this.current = index
				},
				// 预览视频
				onPreviewVideo(url) {
				  this.previewVideoUrl = url;
				  this.$nextTick(() => {
				    this.$refs.popupVideo.open()
				  })
				},
				 // 删除图片
				 onDelete(index, arr) {
				   this.model1[arr].splice(index, 1)
				   console.log(this.model1[arr], ' this[arr]')
				   this.$forceUpdate();
				 },
				 // 上传视频和图片
				 async onUpload({
				 	type,
				 	size,
				 	count
				 }, keyx) {
				 	let res = await uploadFile(await chooseFile({
				 		type,
				 		size,
				 		count,
				 	}))
				 	if (type == 'image') {
						if (keyx == 'price'){
							this.model1.price_image.push(res);
						} else {
							this.model1.images.push(res);
						}
				 	}
				 	if (type == 'video') {
				 		this.model1.videos = [res];
				 	}
				 
				 },
				  submit() {
					
						const formData=JSON.parse(JSON.stringify(this.model1))
						
						formData.images=formData.images.map(item=>item.url).join(",")
						formData.videos=formData.videos.map(item=>item.url).join(",")
						formData.price_image=formData.price_image.map(item=>item.url).join(",")
						if(!this.typeName) {
							uni.$u.toast(this.$t('请选择发布类型'))
							return;
						}
						console.log(formData)
						// return;
					  this.$refs.uForm.validate(valid => {
							if (valid) {
								this.btnDis= true
								uni.showLoading({
									title: this.$t('提交中')
								});
								sendSaveProfessional({...formData,location_city: this.location_city}).then(res => {
									if (res.data.data == 200) {

										this.showPersonInfo = true
								
									} else {
										// uni.$u.toast(res.data.msg)
										uni.$u.toast(res.data[this.plang('msg')])
										
									}
									uni.hideLoading()
									this.btnDis= false
								})
							} else {
								uni.$u.toast(this.$t('请检查是否有未上传内容'))
							}
						})
				  }
		}
	}
</script>

<style lang="scss">
	@import '@/assets/appScss.scss';
	@import './index.scss';
	page {
		background: #F6F7FB;
		height: auto !important;
	}
	uni-page {
		height: auto !important;
	}
	uni-page {
		height: auto !important;
	}
	.empty {
		width: 100%;
		height: 30rpx;
	}
	.titleSty {
		color: #262728;
		font-family: "PingFang SC";
		font-size: 28rpx;
		font-style: normal;
		font-weight: 600;
		// padding-top: 34rpx;
		margin-left: 14rpx;
		position: relative;
	}
		.formSty {
			height: auto;
			padding-bottom: 200rpx;
			/deep/ .u-form-item__body {
				padding: 0;
			}
		}
		/deep/ .u-form {
				border: transparent !important;
				height: auto;
		}
		.smallInputSty {
			width: 194rpx;
			height: 80rpx;
			flex-shrink: 0;
			border-radius: 500rpx;
			border: 2rpx solid #D8D8D8;
			// background: #F7F7F7;
			color: #333;
			font-family: "PingFang SC";
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 28rpx;
		
			/* 116.667% */
			/deep/ .uni-input-input,
			.uni-input-placeholder {
				text-align: center;
			}
		}
		.unitSty {
				width: 150rpx;
				height: 80rpx;
				flex-shrink: 0;
				border-radius: 500rpx;
				border: 2rpx solid #D8D8D8;
				line-height: 80rpx;
				text-align: center;
				.commonSty {
					color: #333;
					font-family: "PingFang SC";
					font-size: 28rpx;
					font-style: normal;
					font-weight: 400;
				}
				.acticeUnitSty {
					color: #278AFF;
				}
		}
		.badBtn {
			width: 100%;
			height: 80rpx;
			border-radius: 18rpx;
			// background: #F7F7F7;
			// border: 1rpx solid #dcdfe6;
			display: flex;
			justify-content: space-between;
		}
		/deep/ .u-hairline-border::after {
			border: 2rpx solid #D8D8D8 !important;
			// opacity: 1 !important;
			// border: transparent !important;
		}
	.contentBg {
		background-color: #fff;
		padding: 0 24rpx;
		// margin-left: 24rpx;
		// margin-right: 24rpx;
		border-radius: 18px;
		padding-bottom: 35rpx;
		/deep/ .u-form-item__body__right__message {
			margin-left: 0 !important;
		}
		/deep/ .u-icon__icon {
			font-size: 52rpx !important;
		}
		/deep/ .u-border-bottom{
			// border-bottom: none;
			// display: none;
			position: inherit;
		}
		/deep/ .u-add-wrap {
			// display: none !important;
			color: #D9D9D9;
			font-size: 20rpx;
		}
		/deep/ .u-add-tips {
			display: none !important;
		}
		/deep/ .u-input--border {
			border-radius: 18rpx !important;
		}
		/deep/ .u-form-item {
			line-height: 50rpx !important;
			color: #0e0e0e !important;
		}
	}
	.textareaSty {
		width: 100%;
		height: 226rpx !important;
		border-radius: 18rpx;
		border: 2rpx solid #D8D8D8;
		// background: #F7F7F7;
		margin-top: 24rpx;
	}
	.footer_btn4{
		position: fixed;
		left:0;
		bottom: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		padding:30rpx 24rpx 60rpx;
		z-index: 20;
		.btn_blue{
			width: 97%;
			height: 94rpx;
			flex-shrink: 0;
			border-radius: 500px;
			border: 2rpx solid rgba(3, 189, 130, 0.10);
			background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
			color: #FFF;
			font-family: "PingFang SC";
			font-size: 32rpx;
			font-style: normal;
			font-weight: 600;
			text-align: center;
			line-height: 94rpx;
		}
		.btn_item{
			text-align: center;
			padding:0 10rpx;
			.name{
				color: #8C8C8C;
				font-size: 20rpx;
				line-height: 22rpx;
			}
		}
		.ico{
			width: 42rpx;
			height: 42rpx;
		}
	}
	.commonKindSty {
		width: 150rpx;
		height: 64rpx;
		background-color: #F7F7F7;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		line-height: 64rpx;
		letter-spacing: 0px;
		color: #1D1D1D;
		text-align: center;
		border-radius: 500rpx;
	}
	.activeKindSty {
		background-color: #D7E9FF;
		border: 1px solid #278AFF;
		color: #278AFF;
	}
</style>
